<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_football</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
       @font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1734222_zs9ztarype.eot?t=1587385099038'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1734222_zs9ztarype.eot?t=1587385099038#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANEAAsAAAAABygAAAL4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCDIF7ATYCJAMMCwgABCAFhG0HPBtHBsgekiRNrBSCCIK6JQLbFA/w46r3MeSmI+JuOzgZTU5wJNLGK1khn7MQ6kzu95pfIMxdJQInD/DyUmbLklmzK4/U5iYB7RgDLuRtIRl4n+dwadMSmB8olzUHjUlRL8A4oADH3GQFcoJ+w9hNBA9wOwFVU/nRrVmXVwZMZKBfQDh5jGkGJoWALDvpsqDYMDULDxWU4634gAf89+GPhDJRIQFDNx9ObwNJ3+vfm26MhuynBMLlbHBmkbAYkAkHGx276cvEYvqqkcwgLgWKsiAuFR6N4IJYVoT/8IgCoQhk18F8Ixn5boEFmTJaFz11RQJFn5GxHnASoPWtl4V6tWs51rj9/saHBYcMdz/cfn+KPHN+PvLxprjgdPjx46fIF8tLDucv7/yfLRUvDjs5LczMDTk6zs/2vn8X9/Zjhq0rm5x27M6sL7P3KXzY15L/0zdWwcLv4+P8943Tqwphrtf3Qs71j//PT4Qlphz1Xh6zxUaFM7OT/bWrr5vHrZ1GuVv4+5cVdtCK7B7wsT7ldsA/xRXwEjkJx/ysjcpVXWXdMz0/cWDKY4rc1u+e7q/bdaYfNAEYPT2Kc5Amk95v/xuzLqyojdZx/0zMM/hye27G242epYgymiTwk4UDa3IsNo0phwIsSJ3JRM4noudUMQI8XV+mawYvkgrKBhmikilIymYTM3UxCmrGUVS2HFWLZM6u6SH0hVzBQuMagrYjRE2vkLQ9EjP1MwqGvqGoHRKqdgb7JWvmhmPV1POomaI22NINuVZFxshMzURuCWLaxWaSF3N6BSIaF4bBAUHldCaSEVlihNbBhFCKISaKBDO03ZAoKlAlCo9aaQBLqRoTGIibPhTQqkjAzGoE0oxC2kAtukGcVgoZpo0ps8r3SyCMdqJmpKNqxFkBITRc61CwAEEDiJkKeVDVo9yi6cAIQVEYhBEKCZShdUJEIgWkNnfiIa2oAOyEmCpGIKyHhyoCtldJ/7cJqsAOKcSQQlY+ekZmujg52FjoAQA=') format('woff2'),
  url('//at.alicdn.com/t/font_1734222_zs9ztarype.woff?t=1587385099038') format('woff'),
  url('//at.alicdn.com/t/font_1734222_zs9ztarype.ttf?t=1587385099038') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1734222_zs9ztarype.svg?t=1587385099038#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-hongxin1:before {
  content: "\e639";
}

.icon-hongxin:before {
  content: "\e60c";
}




        body{margin:0;padding:0;width:100%;height:100%;background-color: #eee;}
        .content{width:1100px;height:100%;background-color: #fff;margin:0 auto}
        header{display:flex;height:123px;}
        .ul_many{display:flex;justify-content: space-around;
        align-items: center; font-size: 25px;margin:0;padding:0;}
        li{list-style: none;margin:0;width:19%;
            border-radius: 5%;text-align: center;
        }
        
        li:hover{background-color: #fff;}
        a{text-decoration: none;}
        li a{display:inline-block;width:100%;border-radius: 5%;padding:10px 0;}
        a.active{color:#fff;background-color: #337AB7;}
        .div_img{width:500px;height:123px;}
        .div_img img{width:100%;height:100%}
        .div_nav,.footer{background-color: #FF7777;}
        .footer{height:90px;display:flex;align-items: center;justify-content: center;}
        

        .zhuye{width:100%;}
        .zhuye .lunbo{height:650px;overflow: hidden;}
        .zhuye .lunbo img{width:100%;height:100%;}
        .zhuye_p{font-size:0.9em;background:#aaa;padding:8px;}
        .zhuye_p p{padding:0;margin:0;}
        .span1{font-size:1.4em;}


        .star{width:100%;display:flex;flex-wrap: wrap;
        justify-content: space-around;align-items: center;
        
        }
        .star .tus{width:23%;overflow: hidden;background-color: #eee;margin-top: 10px;height:515px;}
        .star .tus .tupian{padding:9px;height:298px;border-radius: 10%;}
        .star .name{text-align: center;}
        .star .tus img{width:100%;height:100%;}
        .star .zhong{display:flex;justify-content: center;}
        .star .jieshou{padding:6px;}


        .country{width:100%;}
        .country .table{border-collapse: collapse;width:100%;
        text-align: center;border-color: #eee;margin-top:15px;color:#333;}
        .country td,.country th{padding:10px;}
        .country tr:nth-child(2n){background-color: #ccc;}
        .country tr:nth-child(2n+1){background-color: #f9f9f9;}
        .country .img_table{margin-top: 15px;display:flex;}
        .country .xuanz{padding:15px;margin-left:30px;border:1px dotted #555;}


        .login{display:flex;justify-content:center;align-items:center;height:600px;}
        .login .login_div{width:400px;height:350px;background-color: #bbb;flex-direction: column;
        display:flex;justify-content:center;align-items:center;opacity:0.5;}
        .login input{width:70%;height:33px;outline: none;margin-top: 20px;padding-left: 9px;}
        .login .button{width:40%;padding:10px;color:#fff;font-size:25px;text-align: center;
        background-color: #4A68BF;margin-top:30px;opacity: 1;}
        .login .reg{margin-top:12px;}
        

        /* 屏幕宽度500px以下 */
        @media screen and (max-width:500px) {
            .content{width:100%;}
            header{flex-wrap: wrap;height:auto;}
            .div_img{width:100%;height:100px;}
            .ul_many{font-size: 15px;}
            p.text{font-size: 12px;}
            .footer{font-size:12px;height:60px;}

            .zhuye .lunbo{height:430px;overflow: hidden;}
            .zhuye .lunbo img{width:100%;height:70%;}
            .zhuye_p{font-size:0.7em;}
            .span1{font-size:0.9em;}

            .star .tus{width:47%;height:380px;}
            .star .tus .tupian{height:200px;}
            .star .jieshou{font-size:12px;}

            .country .table{font-size:10px;}
            .country td,.country th{padding:6px;}
            .country .img_table{flex-wrap:wrap;}
            .country .xuanz{padding:15px;width:100%;margin-left:0;}
            .country .f_img{width:100%;}

            .login{height:100%;}
            .login .login_div{height:100%;width:100%;}
            .login .reg{margin-bottom:12px;}
        }
        
    </style>
</head>

<body>
    <div class="content" id="app">
        <header>
            <div class="div_img"><img src="image/logo3.png" alt="图片"></div>
            <div class="div_nav">
                <ul class="ul_many">
                    <li data-index='0' @click="handle($event,'/zhuye')"><router-link to="zhuye" 
                        :class="{active:ac=='/zhuye'}" >主页</router-link></li>
                    <li data-index=1 @click="handle($event,'/star')"><router-link to="star" :class="{active:ac=='/star'}">球星</router-link></li>
                    <li data-index=2 @click="handle($event,'/country')"><router-link to="country" :class="{active:ac=='/country'}">夺冠</router-link></li>
                    <li data-index=3 @click="handle($event,'/login')"><router-link to="login" :class="{active:ac=='/login'}">登陆</router-link></li>
                    <li data-index=4 @click="handle($event,'/register')"><router-link to="register" :class="{active:ac=='/register'}">注册</router-link></li>
                </ul>
                <p class="text" style='padding-left:10px;'>
                    说明:这是一个基于vue框架及vue-router组件化开发的关于2018俄罗斯世界杯的单页面应用,
                    并做了移动端兼容,
                    如果出问题请联系站长或访问备用地址：
                    <a href="http://lujiax.gitee.io/bootstrapfootball">http://lujiax.gitee.io/bootstrapfootball</a></p>
            </div>
        </header>
        <content>
            <router-view></router-view>
        </content>
        <footer class="footer">
            <p align="center">
              友情链接：<a>天下足球</a> &nbsp <a>疯狂的足球</a>&nbsp <a>懂球帝</a> &nbsp&nbsp &nbsp&nbsp 版权所有：个人
              &nbsp&nbsp&nbsp&nbsp联系方式：QQ1575308685
            </p>
        </footer>
    </div>
    <script>

        const Zhuye = {
            template:`<div class="zhuye" @mouseover="stop" @mouseout="start">
            <div class="lunbo" v-show='show==0'><div v-html="text[0]" class="zhuye_p"></div><img src="image/tu0.jpg"></div>
            <div class="lunbo" v-show='show==1'><div v-html="text[1]" class="zhuye_p"></div><img src="image/tu1.jpg"></div>
            <div class="lunbo" v-show='show==2'><div v-html="text[2]" class="zhuye_p"></div><img src="image/tu2.png"></div>
            <div class="lunbo" v-show='show==3'><div v-html="text[3]" class="zhuye_p"></div><img src="image/tu3.jpeg"></div>
            </div>`,
            data(){
                return{
                    show:0,
                    timer:'',
                    text:[`<p><span class="span1">世界杯概述:</span>国际足联世界杯（FIFA World
            Cup）简称“世界杯”，是世界上最高荣誉、最高规格、最高竞技水平、最高知名度的足球比赛，与奥运会并称为全球体育两大最顶级赛事，影响力和转播覆盖率超过奥运会的全球最大体育盛事。
            世界杯是全球各个国家在足球领域最梦寐以求的神圣荣耀，也是各个国家（或地区）所有足球运动员的终极梦想。世界杯每四年举办一次，任何国际足联会员国（地区）都可以派出代表队报名参加这项赛事。世界杯是世界足球运动发展推广普及的源头和根本，所以也被誉为“生命之杯”。巴西是夺得该项荣誉最多的球队，共获得5次世界杯冠军，并且在3夺世界杯后永久地保留了前任世界杯雷米特杯。现在的世界杯是大力神杯，两者都统称为世界杯。
          </p>`,
          `<p><span class="span1">俄罗斯世界杯:</span>2018年俄罗斯世界杯是第21届世界杯足球赛。比赛将于2018年6月14日至7月15日在俄罗斯境内11座城市中的12座球场内举行。
            这是世界杯首次在俄罗斯境内举行，也是世界杯首次在东欧国家举行，同时是继2006年德国世界杯后世界杯再一次在欧洲举行。俄罗斯世界杯共有32支球队参加比赛；除去东道主俄罗斯自动获得参赛资格以外，其他31支球队将通过参加预选赛获得参赛资格。世界杯期间，将在俄罗斯境内举行64场比赛角逐出冠军。2014年7月13日俄罗斯总统普京和巴西总统迪尔玛·罗塞夫交接世界杯主办权。
            2017年12月1日，2018年世界杯足球赛决赛圈抽签仪式在俄罗斯莫斯科克里姆林宫举行，32支参赛球队被分入8个小组 。</p>`,

            `<p><span class="span1">战争与足球:</span>足球促进世界体育文化交流避免战争，足球无国界无贫富，人人平等。
            身穿用塑料袋自制的梅西10号球衣的小男孩是阿富汗东部加兹尼省的加格霍里地区的一个贫困家庭的男孩名叫穆塔尔扎，他的父亲阿里夫·阿赫马迪表示：“这孩子真的很喜欢梅西和足球，我们买不起球衣，因为我们只是普通农民。”生在战乱的国度，足球成为他唯一的玩具。由于买不起球衣，他用塑料袋自制了梅西的阿根廷10号球衣。穆塔尔扎的照片感动了许多网友和球迷，不久之后，他便收到了梅西赠送的亲笔签名球衣。
          </p>`,
          `<p>
            <span class="span1">本站活动:</span>vivo作为全球领先的手机品牌，希望通过赞助世界杯足球赛，将vivo坚持的理念、精神传递给消费者，与广大消费者更好的沟通互动，树立vivo国际形象。同时通过尖端、创新的产品和优质的用户体验服务，让每一名球迷用户感受到前所未有的品质饕餮。”参与本站2018世界杯最出色球星与夺冠国家预测投票互动的用户，我们会选出70%用户赠送vivo与2018世界杯的纪念礼品，包括：纪念版手机，吉祥物，足球，球衣球鞋等--最终解释权归站长所有。
          </p>`
            ]
                }
            },
            mounted:function (){
            this_=this;
             this_.timer = setInterval(function(){this_.show++;if(this_.show>=4){this_.show=0}},3000);
            
            },
            methods:{
                stop(){console.log('stop');clearInterval(this.timer)},
                start(){console.log('s');
                this.timer = setInterval(function(){this_.show++;if(this_.show>=4){this_.show=0}},3000);}
            }
        
        
        }
        const Star = {
            template:`
            <div class='star'>
            <div class='tus' v-for='(item,index) in datas' :key='index'>
            <div class='tupian'><img :src='item.img_url'></div><div class="zhong"><div class='name' v-text='item.id' style="display:inline-block;"></div>
            <span class="iconfont icon-hongxin1" style="color:red;font-size:20px;margin:0 10px;" @click='zanf(index)'></span>
            <span style="font-size:14px;color:#888;">{{item.zan}}&nbsp赞</span></div><div class='jieshou' v-text='item.jieshou'></div>
            </div>
            </div>`,
            data(){
                return{
                    datas:[
                        {'zan':232,'id':'梅西','img_url':'image/tua.png','jieshou':'阿根廷足球运动员,世界上最好的球员之一，司职前锋，现效力于巴塞罗那足球俱乐部。梅西被IFFHS评为2013年世界职业联赛的最佳射手奖  2015年8月，获得欧洲最佳球员2016年1月，梅西荣膺2015年度FIFA金球奖，五度得奖创纪录。'},
                        {'zan':122,'id':'C罗','img_url':'image/tub.png','jieshou':'葡萄牙足球运动员,世界上最好的球员之一，司职前锋，现效力于皇家马德里足球俱乐部。然而那时的他远称不上健硕,C罗的“踩单车”过人动作、有力量的射门、在皇马等豪门俱乐部出色的表现，使他逐渐成为葡萄牙队新的领军人物。'},
                        {'zan':43,'id':'内马尔','img_url':'image/tuc.png','jieshou':'巴西足球运动员,世界上最好的球员之一，司职前锋，现效力巴黎圣日耳曼足球俱乐部。是当下最受关注的足球明星。作为新生代的代表人物，他如今取得的成就，不仅因为在绿茵场上的表现，也因其在社交网络和商业市场的超凡影响力。'},
                        {'zan':56,'id':'莱万','img_url':'image/tud.png','jieshou':'波兰足球运动员,世界上最好的球员之一，司职前锋，现效力拜仁慕尼黑足球俱乐部。这位波兰前锋集速度、技术、灵巧、强壮、弹跳等所有前锋需要的素质为一身，堪称现代前锋的模板莱万是足坛的最佳射手，他的能力更加全面'},
                        {'zan':34,'id':'皮克','img_url':'image/tue.png','jieshou':'西班牙足球运动员,世界上最好的球员之一，现效力巴塞罗那足球俱乐部。不同于一般的后卫球员，皮克的脚下技术细腻，甚至在盘带和射门方面也有着很高的造诣，在危急时候让皮克出任中锋'},
                        {'zan':21,'id':'德布劳内','img_url':'image/tuf.png','jieshou':'比利时足球运动员,世界上最好的球员之一，司职中锋，现效力曼城足球俱乐部。作为一名中前场全能的球员，德布劳内十分出色，在打边锋的时候喜欢内切后用右脚射门，因而有个“狂飙魔鬼”的绰号。'},
                        {'zan':24,'id':'布冯','img_url':'image/tui.png','jieshou':'意大利足球运动员,世界上最好的球员之一，司职门将，效力尤文图斯足球俱乐部。作为一名世界级门将，他不喜欢扑球脱手，身材的优势也使得不畏惧接高空球 他能够迅速对对方前锋的射门做出反应'},
                        {'zan':44,'id':'苏亚雷斯','img_url':'image/tuh.png','jieshou':'乌拉圭足球运动员,世界上最好的球员之一，司职前锋，现效力巴塞罗那足球俱乐部。苏亚雷斯是乌拉圭历史上最具天赋的足球天才之一苏亚雷斯是一个顶级球员，他能带领球队胜利，很多球队希望得到他'}
                        ]}
        },
        methods:{zanf(index){this.datas[index].zan++}}
        }
        const Country = {
            template:`
        <div class="country">
          <table class="table" border>
         <caption style="font-size:1.5em;text-align:center;">往届冠军</caption>
         <thead>
         <tr style="background-color:#ccc;">
            <th>届数</th>
            <th>举办地</th>
            <th>冠军</th>
            <th>亚军</th>
            <th>季军</th>
            <th>殿军</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>阿根廷</td>
            <td>阿根廷</td>
            <td>荷兰</td>
            <td>巴西</td>
            <td>意大利</td>
        </tr>
        <tr>
            <td>12</td>
            <td>西班牙</td>
            <td>意大利</td>
            <td>联邦德国</td>
            <td>法国</td>
            <td>比利时</td>
        </tr>
        <tr>
            <td>13</td>
            <td>墨西哥</td>
            <td>阿根廷</td>
            <td>联邦德国</td>
            <td>法国</td>
            <td>比利时</td>
        </tr>
        <tr>
            <td>14</td>
            <td>意大利</td>
            <td>联邦德国</td>
            <td>阿根廷</td>
            <td>意大利</td>
            <td>英格兰</td>
        </tr>
        <tr>
            <td>15</td>
            <td>美国</td>
            <td>巴西</td>
            <td>意大利</td>
            <td>瑞典</td>
            <td>保加利亚</td>
        </tr>
        <tr>
            <td>16</td>
            <td>法国</td>
            <td>法国</td>
            <td>巴西</td>
            <td>克罗地亚</td>
            <td>荷兰</td>
        </tr>
        <tr>
            <td>17</td>
            <td>韩国·日本</td>
            <td>巴西</td>
            <td>德国</td>
            <td>土耳其</td>
            <td>韩国</td>
        </tr>
        <tr>
            <td>18</td>
            <td>德国</td>
            <td>意大利</td>
            <td>法国</td>
            <td>德国</td>
            <td>葡萄牙</td>
        </tr>
        <tr>
            <td>19</td>
            <td>南非</td>
            <td>西班牙</td>
            <td>荷兰</td>
            <td>德国</td>
            <td>乌拉圭</td>
        </tr>
        <tr>
            <td>20</td>
            <td>巴西</td>
            <td>德国</td>
            <td>阿根廷</td>
            <td>荷兰</td>
            <td>巴西</td>
        </tr>
    </tbody>
</table>
<div class="img_table"><img class="f_img" src="image/tua1.png"><div class="xuanz"><form action="" role="form">
<label for="name" style="text-align:center;">夺冠预测投票</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button"class="btn btn-default">提交</button>
<br>
<label for="name">冠军</label><br>
 <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 西班牙
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 巴西</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 德国
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 英格兰</label><br>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>克罗地亚
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 葡萄牙</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 阿根廷
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 瑞士</label><br>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 法国
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 乌拉圭</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 俄罗斯
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 中国</label>
<br>
        <label for="name">亚军</label><br>
 <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 西班牙
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 巴西</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 德国
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 英格兰</label><br>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>克罗地亚
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 葡萄牙</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 阿根廷
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 瑞士</label><br>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 法国
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 乌拉圭</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 俄罗斯
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 中国</label>
<br>
        <label for="name">季军</label><br>
 <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 西班牙
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 巴西</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 德国
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 英格兰</label><br>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>克罗地亚
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 葡萄牙</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 阿根廷
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 瑞士</label><br>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 法国
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 乌拉圭</label>
         <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 俄罗斯
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 中国</label>
        </form></div></div>
            </div>`
            }
        const Login = {template:`
        <div class="login">
            <div class="login_div">
            <input placeholder="用户名/手机号/邮箱" type="text">
            <input placeholder="密码" type="password">
            <div class="button">登陆</div>
            <div class="reg">没有账号>>><router-link to="register">去注册</router-link></div>
            </div>
        </div>`}
        const Register = {template:`<div class="login">
            <div class="login_div">
            <input placeholder="用户名 2~6个字符" type="text">
            <input placeholder="密码" type="password">
            <input placeholder="确认密码" type="password">
            <div class="button">注册</div>
            <div class="reg">已有账号>>><router-link to="login" @click="handle($event,'3')">去登陆</router-link></div>
            </div>
        </div>`}
        const router = new VueRouter({
            routes:[
                {path:"/",redirect:'/zhuye'},
                {path:"/zhuye",component:Zhuye},
                {path:"/country",component:Country},
                {path:'/star',component:Star},
                {path:"/login",component:Login},
                {path:'/register',component:Register}
            ]
        })
        var app = new Vue({
            el:"#app",
            data:{
                msg:"abc",ac:'/zhuye',

            
            },
            router,
            methods:{
                handle(e,num){
                    // console.log(e)
                    // console.log(num)
                    var path=this.$route.path
                    console.log(path)
                    this.ac=path

                }
            }
        })
    </script>
</body>

</html>